$(function(){
//1-首页数据渲染
//2-添加分页功能
//3-添加一级分页的功能

var currentPage=1;//当前页码
var pageSize=3;//每页的数据条数
//1-首页数据渲染
//ajax去数据+模板引擎
function render(){
  $.ajax({
    url:'/category/queryTopCategoryPaging',
    type:'GET',
    data:{
      page:currentPage,
      pageSize:pageSize,
    },
    dataType:'json',
    success:function(res){
      console.log(res)
      //渲染
      $('tbody').html(template('tmp',res));
      //根据数据库真实的总数 生成分页标签
      setPage(res.total);
    }
  })
 }
render();

//2-分页功能
//1-分页是根据数据库数据的总数进行生成的
//2-根据总数生成分页标签(使用插件完成)
//total表示数据库数据的总数
function setPage(total){
  $("#paginator").bootstrapPaginator({
    bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
    currentPage: currentPage, //设置高亮分页标签按钮 
    totalPages: Math.ceil(total / pageSize), // 设置 要生成多少个分页按钮
    onPageClicked: function (event, originalEvent, type, page) {
      //为按钮绑定点击事件 page:当前点击的按钮页码
      // 改变当前页取值 
      currentPage = page;
      // 重新渲染
      render();
    }
  });
}

//表单非空校验
//使用表单校验插件
$('.add-form').bootstrapValidator({
  //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
  excluded: [':disabled', ':hidden', ':not(:visible)'],

  //2. 指定校验时的图标显示，默认是bootstrap风格
  feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },

  //3. 指定校验字段
  fields: {
    //校验用户名，对应name表单的name属性
    categoryName: {
      validators: {
        //不能为空
        notEmpty: {
          message: '请输入一级分类名称'
        }
      }
    }
  }

});

//4-添加一级分类到数据库
//1-点击添加按钮,获取表单数据,在表单数据合理的情况下,发送数据给后台,进行添加
//2-添加完成后,页面重新渲染,隐藏模态框,表单重置...
//插件提供 success.form.bv事件,在点击提交 按钮 并数据校验通过时触发
$('.add-form').on('success.form.bv',function(e){
  //阻止提交按钮 的默认行为
  e.preventDefault();
  //ajax提交
  $.ajax({
    url:'/category/addTopCategory',
    type:'post',
    dataType:'json',
    data:$('.add-form').serialize(),
    success:function(res){
      console.log(res);
      //页面重新渲染第一页的数据 要看到第一页的数据
      currentPage=1;
      render();
      //隐藏模态框
      $('.modal-add').modal('hide');
      //重置表单的数据和样式
      // $('.add-form')[0].reset();
      //重置样式 通过插件实例 去调用插件重置方法 resetForm(是否重置数据);默认值false
      $('.add-form').data('bootstrapValidator').resetForm(true);



    }
  })
})

})